<!-- 关于作者 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">签到</block>
		</cu-custom>
		
		<div class="map">
			<map v-if="!loading" scale="15" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
			<view class="description" v-if="!detail && !loading">
				<view class="titleZ text-center align-center">
					<u-button text="提交" type="primary" @click="submitForm"></u-button>
				</view>
			</view>
		</div>

		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import moment from 'moment';
	import {
		mapActions,
		mapState
	} from "vuex"
	export default {
		computed: {
			...mapState([
				'merchant'
			]),
			top() {
				return this.CustomBar * 2 + 20
			}
		},
		data() {
			return {
				width: 375,
				height: 1920,
				longitude: '',
				latitude: '',
				markers: [],
				detail: null,
				loading: true
			}
		},
		async onLoad(options){
			if(options.item){
				this.loading = true
				this.detail = JSON.parse(options.item)
				this.longitude = this.detail.longitude
				this.latitude = this.detail.latitude
				this.markers = [{
					id: 1,
					latitude: this.detail.latitude,
					longitude: this.detail.longitude
				}]
				this.loading = false
			}
			else{
				await this.getLocation();
			}
		},
		methods: {
			async getLocation() {
				let that = this
				that.loading = true
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude
						that.latitude = res.latitude
						that.markers = [{
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude
						}]
					}
				});
				that.loading = false
			},
			async submitForm(){
				let that = this
				that.loading = true
				let res = await api.signAdd({
					fkShopId: that.merchant.id,
					signTime: moment((new Date()).getTime()).format('YYYY-MM-DD HH:mm:ss'),
					latitude: that.latitude,
					longitude: that.longitude
				})

				that.loading = false
				if(res.data.code == 200 && res.data.success){
					uni.setStorageSync('entryDetail', 'signDetail')//添加操作标记，返回时需要刷新
					uni.showToast({
						title: '操作成功',
						icon: 'success',
						duration: 2000
					})
					
					setTimeout(()=>{
						uni.navigateBack();
					}, 2000)
				}
			}
		}
	}
</script>

<style scoped>
	.titleZ {
		width: 670rpx;
		font-size: 52rpx;
		margin-top: 0rpx;
	}

	.contentZ {
		width: 650rpx;
		margin: 10rpx auto 0;
		text-align: left;
	}

	.about-bg {
		background-size: cover;
		width: 100vw;
		height: 100vh;
		justify-content: center;
		flex-direction: column;
		color: #333;
	}

	.edit-fixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.detail-imgs image {
		width: 100%;
		float: left;
		/* height:400rpx; 不定高了*/
		border: 0;
		padding: 0;
		margin: 0
	}

	.share-img {
		position: fixed;
		padding: 10rpx;
		width: 100rpx;
		height: 100rpx;
		/* top: 680rpx; */
		bottom: 200rpx;
		right: 20rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none;
	}

	.about {
		margin: 0;
		width: 100%;
		height: 100vh;
		padding-top: 20%;
		color: #333;
		background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
		/* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.container {
		width: 100%;
		position: absolute;
		text-align: center;
	}

	.like-fx {
		position: fixed;
		right: 0;
		z-index: 1024;
		pointer-events: none;
		/* background-color: red; */
	}
	.map{
		width: 100%; 
		height: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.map map{
		width: 100%; 
		height: 100%;
	}
	.map .description{
		position: absolute;
		left: 20rpx;
		bottom: 50rpx;
		width: calc( 100% - 40rpx );
		padding: 20rpx;
		border-radius: 10rpx;
	}
</style>